<script setup>
import {nextTick, onMounted, ref} from "vue";
import {listOrgTree} from "../../../http/manage/org.js";
import {manageStore} from "../../../stores/counter.js";
import {
  bandAccountRole,
  createAccount,
  deleteAccount,
  listAccount,
  listAccountByOrgUkId, listAccountDetails, listAccountDetailsByOrgUkId,
  updateAccount
} from "../../../http/manage/account.js";
import {listRole} from "../../../http/manage/role.js";

const orgTreeFormProps = {
  children: 'children',
  label: 'name',
}

const roleTableRef = ref(null)

let currentAccount = ref("")
let accountTableData = ref([])
let orgTableTreeData = ref([])
let roleTableData = ref([])

let accountForm = ref({})
let accountName = ref("")
let showAccountForm = ref(false)
let accountUpdate = ref(false)

let showBandAccountRole = ref(false)

function showAccountCreate() {
  showAccountForm.value = true
  accountUpdate.value = false
}

function showAccountUpdate(account) {
  accountForm.value = account
  showAccountForm.value = true
  accountUpdate.value = true
}

function showAccountRoleBand(account) {
  handleRoleList()
  currentAccount.value = account
  showBandAccountRole.value = true
}

function handleAccountSave() {
  if (accountUpdate.value) {
    handleAccountUpdate()
  } else {
    handleAccountCreate()
  }
}

function handleAccountCreate() {
  createAccount(accountForm.value).then(response => {
    accountForm.value = {}
    handleAccountListByOrgUkId(accountForm.value.orgUkId)
    showAccountForm.value = false
  })
}

function handleAccountUpdate() {
  updateAccount(accountForm.value).then(response => {
    accountForm.value = {}
    handleAccountListByOrgUkId(accountForm.value.orgUkId)
    showAccountForm.value = false
  })
}

function handleRoleSelect(roleSelectionList) {
  currentAccount.value.roleUkIdList = roleSelectionList
}

function handleBandAccountRole() {
  bandAccountRole(currentAccount.value.ukId, currentAccount.value.roleUkIdList).then(response => {
    showBandAccountRole.value = false
  })
}

function handleAccountDelete(account) {
  deleteAccount(account.ukId).then(response => {
    handleAccountDetailsList()
  })
}

function handleAccountDetailsList(username) {
  listAccountDetails(username).then(response => {
    accountTableData.value = response.data
  })
}

function handleAccountListByOrgUkId(orgUkId) {
  listAccountByOrgUkId(orgUkId).then(response => {
    accountTableData.value = response.data
  })
}

function handleAccountDetailsListByOrgUkId(orgUkId) {
  listAccountDetailsByOrgUkId(orgUkId).then(response => {
    accountTableData.value = response.data
  })
}

function handleOrgTreeList(parentUkId) {
  listOrgTree(parentUkId).then(response => {
    orgTableTreeData.value = response.data
  })
}

function handleRoleList() {
  listRole().then(response => {
    roleTableData.value = response.data
  })
}

function orgRowClick(org) {
  handleAccountDetailsListByOrgUkId(org.ukId)
}
onMounted(() => {
  handleOrgTreeList(0)
  handleAccountDetailsList()
})

</script>

<template>
  <div style="display:flex; width: 200px; margin-left: 5px; margin-right: 5px; padding-top: 5px">
    <el-table
        :data="orgTableTreeData"
        row-key="ukId"
        @row-click="orgRowClick"
        border
        default-expand-all
        highlight-current-row
    >
      <el-table-column prop="name" label="名称"/>
    </el-table>
  </div>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="accountName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAccountDetailsList(accountName)">查询</el-button>
          <el-button type="primary" @click="showAccountCreate({})">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          :data="accountTableData" border style="width: 100%;">
        <el-table-column type="expand">
          <template #default="props">
            <el-descriptions border>
              <el-descriptions-item label="姓名">{{ props.row.name }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ props.row.age }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ props.row.gender }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{ props.row.phone }}</el-descriptions-item>
              <el-descriptions-item label="地址">
                {{ props.row.address }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="账户名" min-width="200"/>
        <el-table-column prop="status" label="状态" width="70">
          <template #default="scope">
            <el-switch
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button @click="showAccountUpdate(scope.row)">
              编辑
            </el-button>
            <el-button @click="showAccountRoleBand(scope.row)">
              绑定角色
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleAccountDelete(scope.row)"
                :title="'是否确认删除账户数据 [ ' + scope.row.username + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
        style="flex: none; display: flex; flex-flow: row nowrap; align-items: center; height: 36px; border-top: #5cadff 1px solid;">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="1000"/>
    </div>
  </div>

  <el-dialog title="账户管理"
             @close="accountForm = {}"
             v-model="showAccountForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="accountForm" label-width="80px">
      <el-form-item label="所属机构">
        <el-tree-select
            check-strictly=true
            node-key="ukId"
            v-model="accountForm.orgUkId"
            :props="orgTreeFormProps"
            :data="orgTableTreeData"
        />
      </el-form-item>
      <el-form-item label="账户名">
        <el-input v-model="accountForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="accountForm.password"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="accountForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="accountForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showAccountForm = false; accountForm = {}">Cancel</el-button>
        <el-button type="primary" @click="handleAccountSave">Save</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="账户角色管理"
             @close="accountForm = {}"
             v-model="showBandAccountRole"
             :close-on-click-modal="false"
             label-width="80px">

    <el-transfer
        :titles="['未选择', '已选择']"
        :props="{
          key: 'ukId',
          label: 'name',
        }"
        @change="handleRoleSelect"
        v-model="currentAccount.roleList" :data="roleTableData" />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showBandAccountRole = false">取消</el-button>
        <el-button type="primary" @click="handleBandAccountRole">
          保存
        </el-button>
      </div>
    </template>

  </el-dialog>

</template>

<style scoped>
</style>